<template>
  <scroller class="page">
    <div class="product-list">
      <div class="product-item" v-for="item in list">
        <image class="product-item-img" resize="cover" :src="item.cover"></image>
        <div class="product-item-content">
          <div class="product-item-info">
            <text class="product-item-title">{{ item.title }}</text>
            <text class="product-item-price" v-if="item.minPrice">￥{{ item.minPrice }}起/盆</text>
            <text class="product-item-price" v-else>￥{{ item.price }}/盆</text>
          </div>
          <div class="product-item-star">
            <text>★</text>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="top">
      <div class="title">
        <text class="title-text">我的收藏</text>
        <div class="underline"></div>
      </div>
    </div> -->
    <!-- <Toolbar /> -->
    <Footer />
  </scroller>
</template>
<script>
// import Toolbar from '@/components/Toolbar';
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
export default {
  name: 'App',
  components: {
    // Toolbar,
    Footer
  },
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    var event = weex.requireModule('event');
    event.initData(JSON.stringify({'title':'我的收藏'}), json => {
      this.init();
    })
  },
  methods: {
    init() {
      var url = '/yq/user/subscribeProducts';
      var params = {};
      var success = res => {
        console.log(res);
        console.log(res.info.length);
        this.list = res.info;
      }
      var fail = res => {
        modal.toast({
          message: '获取数据失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    },
    goPay() {}
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding-bottom: 150px;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #aaa;
  background-color: #fff;
}

.title {
  flex-direction: column;
  align-items: center;
}

.title-text {
  font-weight: bold;
  margin-bottom: 10px;
}

.underline {
  height: 3px;
  width: 100px;
  background-color: #000;
}

.product-list {
  flex-direction: row;
  flex-wrap: wrap;
  /*padding-top: 140px;*/
  padding-top: 30px;
}

.product-item {
  padding-left: 30px;
  width: 360px;
  flex-direction: column;
  margin-bottom: 30px;
}

.product-item-img {
  width: 330px;
  height: 450px;
  margin-bottom: 10px;
}

.product-item-content {
  flex-direction: row;
  justify-content: space-between;
}

.product-item-info {
}

.product-item-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  max-width: 300px;
}

.product-item-star {

}

.product-item-price {
  font-size: 24px;
}
</style>